<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../static/css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../static/css/app.css" />
		<link rel="stylesheet" href="../static/css/native.css">
	    <script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script> 
	</head>

	<body id="order_item_page">

		<style>
			.mui-control-content {
				background-color: white;
                min-height: 80px; 
                height: 120px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			 
		</style>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"> 订单详情 </h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
		    <div class="order_detail_nav" href="" style="width:100%;height:100%">
		        <a style="display:block;float:right;height:36px;margin:7px;line-height:36px;text-aligin:center;padding:0px 20px;border-radius:6px;color:white;background:red;" href="">付款</a>

		        <a style="display:block;float:right;height:36px;margin:7px;line-height:36px;text-aligin:center;padding:0px 20px;border-radius:6px;color:white;background:#aaa;" href="">取消</a>

		        <a style="display:block;float:right;height:36px;margin:7px;line-height:36px;text-aligin:center;padding:0px 20px;border-radius:6px;color:white;background:red;" href="">确认收货</a>
		    </div>
		</nav>
		<div class="mui-content">
		
			<div class="mui-slider-group mui-scroll">
				<div class="list-container"> 
                   <div class="list">
                      <div class="item">
                      	<ul class="header">
                            <li>
                               <span class="key">订单编号</span>   
                               <span class="value">201709012455125</span> 
                            </li>  
                      	    <li>
                               <span class="key">下单时间</span>   
                               <span class="value">2017-09-12 12:24</span> 
                            </li> 
                      	</ul>
                        <div class = "product">
                             <div class="item-image">
                            	 <img src="../static/images/item.png">
	                         </div> 
	                         <div class="item-content">
	                            <p class='pro-name'> 充电壳 </p>
	                            <div class="pro-attr">
	                               颜色:红,尺寸:12 
	                            </div>
	                            <div class="price">
	                               <span> 12 元 </span>
	                               <span> X 2 </span>
	                            </div>
	                         </div>
                        </div>
                        <div class = "product">
                             <div class="item-image">
                            	 <img src="../static/images/item.png">
	                         </div> 
	                         <div class="item-content">
	                            <p class='pro-name'> 充电壳 </p>
	                            <div class="pro-attr">
	                               颜色:红,尺寸:12 
	                            </div>
	                            <div class="price">
	                               <span> 12 元 </span>
	                               <span> X 2 </span>
	                            </div>
	                         </div>
                        </div>
                        <div class = "budget">
                            <span> 总共 </span> 
                            <span> : </span> 
                            <span> 50元</span> 
                            <span class="status">已确认</span>
                        </div>
                        <div class="addr-message">
                         <p>地址信息</p> 
                           <table class="mui-table addr-msg-tab">
                             <tr>
                                <td>收货人</td>
                                <td>阿布</td>
                             </tr> 
                             <tr>
                                <td>联系电话</td>
                                <td>18902123716</td>
                             </tr> 
                             <tr>
                                <td>收货地址</td>
                                <td>天津市南开区赛德广场5号楼11层</td>
                             </tr> 
                           </table>
                        </div>
                      </div>
                   </div> 
				</div>
			</div>

		</div>
		<script src="../static/js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
            $(function(){
            	$(".mui-control-item").click(function(){
                    var index = $(this).index();
                    var deg = index * 80;
            		$("#sliderProgressBar").css({transform:"translate3d("+deg+"px, 0px, 0px) translateZ(0px)"})
            	})
            })  
		</script>
	</body>
</html>